<html lang="Zh_cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>插件管理</title>
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"/>
    <link rel="stylesheet" href="https://element-plus.gitee.io/assets/style.22570d17.css"/>
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <!--    <script src="https://unpkg.com/@element-plus/icons-vue@2.1.0/dist/index.iife.min.js"></script>-->
    <!--    <script src="//unpkg.com/@element-plus/icons-vue"></script>-->
    <!-- Import jQuery 3 -->
    <script src="/static/js/jquery-3.6.4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/css/frame.css">
    <!--    bootstrap-->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div id="app" style="height: 100%;width: 100%">
    <div>
        <el-collapse v-model="activeNames" @change="handleChange" v-for="reader in readers">
            <el-collapse-item name="1">
                <template #title>
                    <el-text class="mx-1" :type="reader.success?'':'danger'">{{reader.type}}</el-text>
                </template>
                <div class="example" data-v-5d9e4641="">
                    <div class="op-btns" data-v-5d9e4641="" style="height: auto">
                        <div>
                            <el-text class="mx-1"><span v-html="reader.introduction"></span></el-text>
                        </div>
                    </div>
                    <div class="el-divider el-divider--horizontal m-0" role="separator" data-v-5d9e4641=""
                         style="--el-border-style:solid;"><!--v-if--></div>
                    <div class="example-showcase" data-v-1ab1ffd8="" data-v-5d9e4641="">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title"><span v-html="reader.params.description"></span></h5>
                                <p class="card-text">
                                <div>
                                    <div v-for="param in reader.params.params">
                                        <el-button :title="param[1]">{{param[0]}}</el-button>
                                        <el-input v-model="param[2]"></el-input>
                                    </div>
                                </div>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>
        <el-button @click="saveconfig">保存</el-button>
    </div>
</div>
<script>
    const App = {
        data() {
            return {
                readers: []
            };
        },
        methods: {
            saveconfig() {
                const that = this;
                // console.log(this.readers);
                $.ajax(
                    {
                        url: '/api/savereaderplugin',
                        'data': JSON.stringify(
                            that.readers
                        ),
                        'type': 'POST',
                        'processData': false,
                        'contentType': 'application/json', //typically 'application/x-www-form-urlencoded', but the service you are calling may expect 'text/json'... check with the service to see what they expect as content-type in the HTTP header.
                        success: function (msg) {
                            alert(msg)
                        }
                    }
                );
            }
        },
        mounted() {
            const that = this;
            $.getJSON(
                "/api/getpluginreader",
                null,
                function (data) {
                    that.readers = data
                }
            );
        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
</script>
</body>
</html>